import './style.css'


const BLACK_BACKGROUND = '#000'
const LINE_COLOR = '#fff'

//写构造函数
class Blackboard {
    //public/private :写就会变为对象属性，不然只是形参
    constructor(
        public el = document.querySelector<HTMLCanvasElement>("#canvas")!,
        private app = el.getContext("2d"),
        private width: number = el.width,
        private height: number = el.height,
        private btns: HTMLDivElement = document.createElement('div'),
        private bgColor: string = BLACK_BACKGROUND,
        private lineColor: string = LINE_COLOR
    ) {
        this.initCanvas()
        // 绑定事件
        this.bindEvent();


    }

    // 清屏操作
    public clear() {
        const el = document.createElement('button')
        el.innerText = '清屏'
        this.btns.insertAdjacentElement('afterbegin', el)

        //点击事件
        el.addEventListener('click', () => {
            // @ts-ignore
            this.app.fillStyle = this.bgColor
            // @ts-ignore
            this.app.fillRect(0, 0, this.width, this.height)
        })
        return this
    }

    // 背景颜色修改
    public setBgColor(color: string) {
        this.bgColor = color
        // @ts-ignore
        this.app.fillStyle = color
        // @ts-ignore
        this.app.fillRect(0, 0, this.width, this.height)
        return this
    }

    // 修改粉笔颜色
    public setLineColor() {
        const colors = ['#fff', "#1abc9c", "#f1c40f", "#9b59b6"];
        //定义一个容器
        const container = document.createElement('div')
        // 增加样式
        container.classList.add('line-color-container')
        colors.forEach(item => {
            const div = document.createElement('div')
            div.style.cssText = `width:20px;height:20px;background:${item}`
            container.insertAdjacentElement('afterbegin', div)

            // 循环时添加事件
            div.addEventListener('click', () => {
                this.lineColor = item;
                // @ts-ignore
                this.app.lineWidth = 1
            })
        })
        this.btns.insertAdjacentElement('beforeend', container)
        return this
    }

    // 橡皮擦功能
    public erase() {
        const el = document.createElement('button')
        el.innerText = '橡皮擦'
        this.btns.insertAdjacentElement('afterbegin', el)

        //点击事件
        el.addEventListener('click', () => {
            // @ts-ignore
            this.lineColor = this.bgColor
            // 线的宽度
            // @ts-ignore
            this.app.lineWidth = 10
        })
        return this
    }

    // 铅笔功能
    public draw() {
        const el = document.createElement('button')
        el.innerText = '铅笔'
        this.btns.insertAdjacentElement('afterbegin', el)

        //点击事件
        el.addEventListener('click', () => {
            // @ts-ignore
            this.lineColor = "white"
            // 线的宽度
            // @ts-ignore
            this.app.lineWidth = 1
        })
        return this
    }

    // 截图保存
    public printScreen() {
        const el = document.createElement('button')
        el.innerText = '截图保存'
        this.btns.insertAdjacentElement('afterbegin', el)

        const img = document.createElement('img')
        //点击事件
        el.addEventListener('click', () => {
            img.src = this.el.toDataURL('image/jpeg')
            img.classList.add('img-print-screen')
        })
        this.btns.insertAdjacentElement('afterend', img)
        return this
    }

    // 绑定事件
    private bindEvent() {
        // 创建唯一实例
        const callback = this.drawLine.bind(this)
        // 鼠标按下事件
        this.el.addEventListener('mousedown', () => {
            // @ts-ignore
            this.app.beginPath()
            // @ts-ignore
            this.app.strokeStyle = this.lineColor
            // 鼠标移动事件
            this.el.addEventListener('mousemove', callback)
            // 鼠标松开事件
            document.addEventListener('mouseup', () => {
                // 划线
                this.el.removeEventListener('mousemove', callback)
            })
        })
    }

    private drawLine(event: MouseEvent) {
        // @ts-ignore
        this.app.lineTo(event.offsetX, event.offsetY)
        // @ts-ignore
        this.app.stroke()
    }

    private initCanvas() {
        // @ts-ignore
        this.app.fillStyle = this.bgColor
        // @ts-ignore
        this.app.fillRect(0, 0, this.width, this.height)

        // this.btns.style.cssText = 'margin-top:10px'
        this.btns.classList.add('btns')
        this.el.insertAdjacentElement('afterend', this.btns)
    }
}

const instance = new Blackboard()
instance.clear()//清屏操作
    .erase()//橡皮擦功能
    .draw()//铅笔功能
    .printScreen()//截图保存
    // .setBgColor("#16a085")
    .setLineColor()//修改粉笔颜色
